﻿
@using Cineplex.Contacts.Extensions
@model IEnumerable<Cineplex.Contacts.Models.Contact>

@{
    ViewBag.Title = "Contacts list";
}

<h2>Contacts list</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<p>

@(Html.Telerik().Grid(Model)
        .Name("Grid")
        .DataKeys(keys => keys.Add(p => p.ID))
        .Columns(columns =>
        {
            columns.Template(@<input type="checkbox" id="check-@item.ID" class="contactitem" />).HeaderTemplate(@<input type="checkbox" id="checkallitem" />).Width(20);
            columns.Template(@<a href="/Contact/Edit/@item.ID">@item.Name</a>).Width(160).Title("Tên /  Name");            
            columns.Bound(o => o.DateOfBirth).Format("{0:dd/MM/yyyy}").Width(80).Title("Sinh nhật/ Birthday");
            columns.Bound(o => o.Email).Width(140);
            columns.Bound(o => o.Address).Title("Địa chỉ /  Address");
            columns.Bound(o => o.HandPhone).Width(120).Title("Số điện thoại / Phone");                     
            columns.Command(commands =>
                                {
                                    commands.Custom("Edit").Action("Edit", "Contact").ButtonType(GridButtonType.Image).ImageHtmlAttributes(new { @class = "t-icon t-edit" });
                                    commands.Custom("Delete").Action("Delete", "Contact").ButtonType(GridButtonType.Image).ImageHtmlAttributes(new { @class = "t-icon t-delete" });
            }).Width(80).Title("");
        })      
        .Footer(false)
        .ClientEvents(events=>events.OnComplete("grid_onComplete"))
        .Scrollable(scrolling => scrolling.Enabled(false))        
        .Pageable(paging => paging.Enabled(false))
        .Filterable(filtering => filtering.Enabled(false))
                .Editable(editting => { editting.Enabled(false); editting.Mode(GridEditMode.InForm); })                        
            
            
) 

<script type="text/javascript">
    $(document).ready(function () {

        $(".contactitem").click(function () {
            var check = $(this).attr("checked");            
            if (!check) {
                $("#checkallitem").removeAttr("checked");
            } else {
                $(".contactitem").each(function () {
                    check = $(this).attr("checked");
                    if (!check) {
                        $("#checkallitem").removeAttr("checked");
                        return;
                    }
                });
            }
        });
        $("#checkallitem").click(function () {
            var check = $(this).attr("checked");
            if (check) {
                $(".contactitem").each(function () {
                    $(this).attr("checked", "checked");
                });
            } else {
                $(".contactitem").each(function () {
                    $(this).removeAttr("checked");
                });
            }
        });

    });
</script>